<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查看客户详细信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入 Vue.js -->
    <script src="/assets/vue/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <script src="/assets/element-plus/index.full.js"></script>
    <!-- 引入 Axios -->
    <script src="/assets/axios/axios.js"></script>
    <!-- 引入自定义安全模块 -->
    <script src="/assets/oa/security.js"></script>
    <style>
        /* 自定义样式 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f2f5;
        }
        .info-container {
            width: 500px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .info-item {
            margin-bottom: 15px;
        }
        .info-label {
            font-weight: bold;
        }
        .info-value {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题 -->
    <h2>客户详细信息</h2>
    <!-- 信息展示区域 -->
    <div class="info-container">
        <div class="info-item">
            <span class="info-label">客户号:</span>
            <span class="info-value">{{ customer.customerid }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">账户名:</span>
            <span class="info-value">{{ customer.customerusername }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">客户状态:</span>
            <span class="info-value">{{ customer.customerstatus }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">客户名称:</span>
            <span class="info-value">{{ customer.customername }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">账号余额:</span>
            <span class="info-value">{{ customer.customerbalance }}元</span>
        </div>
        <div class="info-item">
            <span class="info-label">所属行业:</span>
            <span class="info-value">{{ customer.customerindustryid }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">创建时间:</span>
            <span class="info-value" >{{ formatTimestamp(customer.createtime) }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">更新时间:</span>
            <span class="info-value" >{{ formatTimestamp(customer.updatetime) }}</span>
        </div>
        <div class="info-item" style="display: flex; align-items: center;">
            <span class="info-label" style="height: 150px;">头像:</span>
            <img v-if="customer.profilepicture" :src="getImageUrl(customer.profilepicture)" alt="头像" style="max-width: 150px; max-height: 150px;">
            <span v-else>无</span>
        </div>
    </div>
</div>

<script>
    // 定义 Main 组件
    var Main = {
        data() {
            return {
                customer: {} // 客户信息数据
            }
        },
        mounted() {
            // 页面加载完成时获取客户详细信息数据
            this.fetchCustomerData();
        },
        methods: {
            fetchCustomerData() {
                // 获取客户详细信息数据
                const urlParams = new URLSearchParams(window.location.search);
                const customerId = urlParams.get('customerid');
                axios.post("/cusinfo/detail",{ customerid:customerId})
                    .then(response => {
                        // 将获取到的客户详细信息数据赋值给 customer 对象
                        console.info(response)
                        this.customer = response.data.data;
                    })
                    .catch(error => {
                        console.error("获取客户详细信息失败：" + error);
                    });
            },
            formatTimestamp(timestamp) {
                if (!timestamp) return ''; // 如果时间戳不存在，则返回空字符串
                const date = new Date(timestamp);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            getImageUrl(profilepicture) {
                // 假设后端图片存储在 /imgs 目录下
                return `/images/${profilepicture}`;
            }
        }
    };

    // 创建 Vue 应用
    const app = Vue.createApp(Main);
    // 挂载至 #app
    app.mount("#app");
</script>

</body>
</html>
